Keyboard Avoiding View এবং ScrollView এর সাথে ফর্ম ম্যানেজমেন্ট

React Native এ KeyboardAvoidingView এবং ScrollView দুটি কম্পোনেন্ট ব্যবহার করে আপনি ফর্ম ম্যানেজমেন্ট সহজে এবং ব্যবহারকারী বান্ধবভাবে করতে পারেন, বিশেষত যখন আপনি মোবাইল ডিভাইসে ফর্ম ফিল্ডে ব্যবহারকারীর ইনপুট গ্রহণ করছেন এবং কিবোর্ডের উপস্থিতি ফর্মের উপাদানগুলোকে আড়াল না করে।

১. KeyboardAvoidingView:

KeyboardAvoidingView একটি React Native কম্পোনেন্ট যা কিবোর্ডের উপস্থিতিতে স্ক্রিনের উপাদানগুলোর অবস্থানকে অটো সঠিকভাবে ঠিক করতে সাহায্য করে। যখন ব্যবহারকারী টেক্সট ইনপুট ফিল্ডে কিছু টাইপ করে, তখন কিবোর্ডটি খোলে এবং ফর্মের উপাদানগুলো আড়াল হতে পারে। KeyboardAvoidingView এটি সমাধান করে, যাতে কিবোর্ডের উপস্থিতিতে ফর্মের উপাদানগুলো দৃশ্যমান থাকে।

২. ScrollView:

ScrollView ব্যবহার করে আপনি যদি অনেক ইনপুট ফিল্ড বা কন্টেন্ট দেখান, তবে কিবোর্ডের কারণে কিছু উপাদান আড়াল হয়ে যেতে পারে। ScrollView ব্যবহার করে আপনি পুরো ফর্মকে স্ক্রলযোগ্য করতে পারেন, যাতে কিবোর্ডের উপরে গিয়েও ব্যবহারকারী ফর্মের অন্য ফিল্ডে স্ক্রল করতে পারেন।

এখন, আমরা একটি উদাহরণ দেখব যেখানে KeyboardAvoidingView এবং ScrollView ব্যবহার করে একটি সিম্পল ফর্ম ম্যানেজমেন্ট তৈরি করা হয়েছে।

উদাহরণ: KeyboardAvoidingView এবং ScrollView এর সাথে ফর্ম ম্যানেজমেন্ট

import React, { useState } from 'react';
import { View, TextInput, Text, Button, StyleSheet, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = () => {
    // ফর্ম সাবমিট করার জন্য ফাংশন
    console.log('Name:', name);
    console.log('Email:', email);
    console.log('Password:', password);
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'} // iOS এ padding, Android এ height ব্যবহার করা হবে
    >
      <ScrollView contentContainerStyle={styles.scrollView}>
        <View style={styles.form}>
          <Text style={styles.label}>Name</Text>
          <TextInput
            style={styles.input}
            placeholder="Enter your name"
            value={name}
            onChangeText={setName}
          />
          
          <Text style={styles.label}>Email</Text>
          <TextInput
            style={styles.input}
            placeholder="Enter your email"
            keyboardType="email-address"
            value={email}
            onChangeText={setEmail}
          />
          
          <Text style={styles.label}>Password</Text>
          <TextInput
            style={styles.input}
            placeholder="Enter your password"
            secureTextEntry
            value={password}
            onChangeText={setPassword}
          />
          
          <Button title="Submit" onPress={handleSubmit} />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollView: {
    flexGrow: 1,
    justifyContent: 'center',
    padding: 20,
  },
  form: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    marginBottom: 12,
    paddingLeft: 8,
  },
});

export default App;

বিস্তারিত ব্যাখ্যা:

1. KeyboardAvoidingView:
   • KeyboardAvoidingView কম্পোনেন্ট ব্যবহার করা হয়েছে যাতে কিবোর্ড খোলার সময় ফর্মের উপাদানগুলো আড়াল না হয়। এটি iOS এবং Android উভয়ের জন্য কিবোর্ডের অবস্থান অনুযায়ী উপাদানগুলোর পজিশন ঠিক করে।
   • behavior প্রোপার্টি iOS এবং Android প্ল্যাটফর্মের জন্য আলাদা করে সেট করা হয়েছে:
     • iOS: 'padding', যাতে কিবোর্ডের জন্য পর্যাপ্ত জায়গা থাকে।
     • Android: 'height', যা কিবোর্ডের উপস্থিতিতে ভিউ-এর উচ্চতা পরিবর্তন করে।
2. ScrollView:
   • ScrollView ব্যবহার করা হয়েছে যাতে ফর্মের ইনপুট ফিল্ডগুলো স্ক্রলযোগ্য হয়, বিশেষত যখন ইনপুট ফিল্ডগুলো অনেক বেশি বা কিবোর্ড খুললে কিছু ফিল্ড আড়াল হতে পারে।
3. TextInput:
   • TextInput কম্পোনেন্ট ব্যবহার করে আমরা নাম, ইমেইল, এবং পাসওয়ার্ড ইনপুট ফিল্ড তৈরি করেছি। প্রতিটি ইনপুট ফিল্ডের জন্য ভ্যালু এবং onChangeText প্রোপার্টি ব্যবহার করা হয়েছে।
4. Button:
   • ফর্ম সাবমিট করতে Button কম্পোনেন্ট ব্যবহার করা হয়েছে।

সারাংশ:

React Native এর KeyboardAvoidingView এবং ScrollView কম্পোনেন্ট ব্যবহার করে আপনি একটি ফর্ম ম্যানেজমেন্ট সিস্টেম তৈরি করতে পারেন যেখানে কিবোর্ড খুললে ফর্মের উপাদানগুলো আড়াল হবে না এবং ব্যবহারকারী সহজে ফর্মটি পূরণ করতে পারবে। KeyboardAvoidingView কিবোর্ডের উপস্থিতিতে উপাদানগুলোকে সঠিকভাবে এডজাস্ট করে, এবং ScrollView ফর্মের অনেক ইনপুট ফিল্ড থাকলে সেগুলোর স্ক্রলিং নিশ্চিত করে।